<template>
	<view class="container">
		<view class="header">
			<view class="header-content">
				<!-- 使用flex布局来让福州和map图标水平对齐 -->

				<view class="city-wrapper" @click="showPicker">
					<picker mode="selector" :range="provinces" @change="onPickerChange">
						<view class="picker">
							{{ selectedProvince }}
						</view>
					</picker>
					<u-icon name="map-fill" size="30" color="#888" />
				</view>

				<!-- 搜索框居中 -->
				<view class="search-bar-wrapper">
					<navigator url="/pages/search/search" class="footer-item">
						<input class="search-bar" type="text" placeholder="诱导公式|师说全文..." />
						<!-- search图标放到搜索框内 -->
						<u-icon name="search" size="25" color="#888888" class="search-icon" />
					</navigator>
				</view>
				<navigator url="/pages/message/message" class="footer-item">
					<u-icon name="bell-fill" size="30" color="#888" />
				</navigator>
				<navigator url="/pages/history/history" class="footer-item">
					<u-icon name="order" size="30" color="#888" />
				</navigator>
			</view>
		</view>

		<view class="grid">
			<view @click="takePhoto(1)" class="grid-item">
				<text>搜索答疑</text>
			</view>
			<view @click="takePhoto(1)" class="grid-item">
				<text>作业批改</text>
			</view>
			<view @click="takePhoto(4)" class="grid-item">
				<text>拍照翻译</text>
			</view>
			<view @click="takePhoto(5)" class="grid-item">
				<text>绘画评级</text>
			</view>
		</view>
		<view class="feature-icons">
			<navigator url="/pages/wordQuery/wordQuery" class="icon-item">
				<text class="uppercase-a">A</text>
				<text>单词查询</text>
			</navigator>

			<navigator url="/pages/index/counter" class="icon-item">
				<text class="percent-symbol">%</text>
				<text>计算器</text>
			</navigator>

			<navigator @click="takePhoto(6)" class="icon-item">
				<u-icon name="edit-pen" size="30" color="#000" />
				<text>语文作文</text>
			</navigator>

			<navigator url="/pages/wrongQuestion/wrongQuestion" class="icon-item">
				<u-icon name="file-text" size="30" color="#000" />
				<text>错题本</text>
			</navigator>
			<navigator url="/pages/mall/mall" class="icon-item">
				<u-icon name="shopping-cart-fill" size="30" color="#000" />
				<text>商城</text>
			</navigator>
		</view>
		<swiper-vue></swiper-vue>
			<view class="feature-section">
				<navigator url="/pages/hotMaterial/hotMaterial" class="feature-item hot-material">
					<image src="/static/index/data.jpg" class="data"></image>
				</navigator>
				<view class="feature-column">
					<navigator url="/pages/index/textbook" class="feature-item">
		
						<image src="/static/index/textbooka.jpg" class="booka"></image>
					</navigator>
					<navigator url="/pages/index/textbook" class="feature-item">
		
						<image src="/static/index/textbookb.jpg" class="booka"></image>
					</navigator>
				</view>
			</view>
		
		</view>
		
</template>
<script>
	import swiperVue from '../pay_video/swiper.vue';
	export default {
		components: {swiperVue},
		data() {
			return {
				provinces: ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省',
					'上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省',
					'湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省',
					'西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区',
					'香港特别行政区', '澳门特别行政区', '台湾省'
				],
				selectedProvince: '请选择',
				photoSrc: '' // 存储拍照或选择的照片路径
			};
		},
		methods: {
			//跳转到直播课
			goVideo() {
				uni.switchTab({
					url: '/pages/video/index'
				});
			},

			showPicker() {
				this.selectedProvince = '请选择';
			},
			onPickerChange(e) {
				if (e.detail.value === -1) {
					this.selectedProvince = '请选择';
				} else {
					this.selectedProvince = this.provinces[e.detail.value];
				}
			},
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID);
				var strStatus;
				if (result === 1) {
					strStatus = "已获得授权";
				} else if (result === 0) {
					strStatus = "未获得授权";
				} else {
					strStatus = "被永久拒绝权限";
				}
				uni.showToast({
					title: strStatus,
					icon: 'none'
				});
			},
			gotoAppPermissionSetting() {
				permision.gotoAppPermissionSetting();
			},
			OpenAlbum() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.photoSrc = res.tempFilePaths[0];
					},
					fail: (err) => {
						console.log('选择照片失败：', err);
					}
				});
			},
			takePhoto(type) {
				// console.log(type);
				this.fileUpload(type);
			},
			fileUpload(type) {
				// ...mapMutations(['setA']),
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					success: (res) => {
						this.photoSrc = res.tempFilePaths[0];
						const tempFilePaths = res.tempFilePaths;
						// 上传文件
						uni.uploadFile({
							url: 'http://192.168.245.79:8006/user/answerQuestion', // 你的Java后端上传接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'file'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data); // 打印上传接口返回的数据
								this.$store.commit('setAnswerContent', '');
								uni.navigateTo({
									url: '/pages/answer/answer'
								});
								uni.request({
									url: 'http://192.168.245.79:8989/ai/correction', // 服务器url地址
									method: 'POST',
									header: {
										'Content-Type': 'application/json' // 确保设置正确的Content-Type
									},
									// userBean: {
									data: JSON.stringify({ // 将data转换为JSON字符串
										filePath: uploadFileRes.data,
										type: type

									}),
									timeout: 120000,
									success: (res) => {
										// 请求成功的处理逻辑
										console.log(res);
										this.$store.commit('setAnswerContent', res
											.data);
									},
									fail: (err) => {
										// 请求失败的处理逻辑
										console.error('请求失败:', err);
									},
									complete: () => {
										// 请求完成的处理逻辑（无论成功与否）
										console.log('请求完成');
									}
								});

							},
							fail: (err) => {
								console.error(err);
							}
						});

					},
					fail: (err) => {
						console.log('拍照失败：', err);
					}
				});
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 10px;
		box-sizing: border-box;
		width: 100%;
		/* 确保父容器占据整个屏幕宽度 */
		min-width: 100%;
		/* 确保最小宽度也是 100% */
	}

	.header {
		display: flex;

		align-items: center;
		justify-content: space-between;
		width: 100%;
		/* 确保头部占满整个屏幕宽度 */

		box-sizing: border-box;
		/* 确保内边距包含在宽度内 */
		background-color: #fff;
		/* 根据需要设置背景颜色 */
		padding: 0 10px;
		/* 例如，为子元素添加左右内边距 */
		min-width: 100%;
		/* 确保最小宽度也是 100% */
	}

	.header-content {
		display: flex;
		/* 使用flex布局 */

		align-items: center;
		justify-content: space-between;
	}

	.city {
		margin-right: 5%;

	}


	.city-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
	}

	.u-popup {
		z-index: 9999;
	}

	.city-list {
		padding: 10px;
	}

	.city-list u-button {
		margin-bottom: 5px;
	}


	.search-bar-wrapper {
		flex-grow: 1;
		/* 搜索框占据剩余空间 */

		max-width: 80%;
		/* 限制最大宽度为容器的85% */
		position: relative;
		/* 用于定位搜索图标 */
		display: flex;
		align-items: center;
		margin-left: 5%;
		/* 左侧边距为容器宽度的8% */
		/* margin-right: 5%; */
		/* 右侧边距为容器宽度的8% */
	}

	.search-bar {
		width: 100%;
		/* 占满整个容器宽度 */

		flex: 1;
		padding: 10px;
		/* 右边距留出空间给图标 */
		border: 1px solid #ccc;
		border-radius: 10px;
		padding: 10px;
	}

	.search-icon {
		position: absolute;
		right: 5px;
		/* 图标右对齐 */
		top: 50%;
		transform: translateY(-50%);

	}

	.icons-container {
		display: flex;
		align-items: center;
		gap: 2vw;
		/* 使用视口宽度单位设置图标间距 */
		margin-left: auto;
		/* 将容器推向右侧 */
	}

	.u-icon {
		font-size: 5vw;
		/* 使用视口宽度单位，使图标大小随屏幕大小变化 */
		right: 5%;
		/* 靠右对齐 */


	}

	.grid {
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		/* 网格项背景颜色 */
	}

	.grid-item {
		display: flex;
		flex: 0 0 auto;
		margin: 5px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		flex: 1;
		/* 让每个网格项占据等宽 */
		text-align: center;

	}

	.grid-item,
	.icon-item {
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 16px;
		width: 100%;
		/* 或者使用 flex-basis: 100%; */
	}

	.data,
	.booka {
		width: 100%;
		/* 图片宽度占满容器 */
		height: auto;
		/* 高度自适应，保持图片比例 */
		object-fit: cover;
		/* 确保图片覆盖整个容器，可能会裁剪图片 */
	}

	.feature-row {
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: space-between;
		/* 子元素之间的间距均匀分布 */
		width: 100%;
		/* 确保占满整个宽度 */
	}


	.bottom-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.bottom-grid-item {
		flex: 1 1 33.33%;
		margin: 5px;
		padding: 10px;
		border: 1px solid #aaffff;
		border-radius: 5px;
		text-align: center;
	}

	.feature-icons {
		display: flex;
		/* 使用flex布局 */
		flex-direction: row;
		/* 水平排列子元素 */
		justify-content: space-around;
		/* 子元素之间的间距均匀分布 */
		align-items: center;
		/* 垂直居中对齐 */

	}

	.icon-item {
		display: flex;
		/* 子元素使用flex布局 */
		flex-direction: column;
		/* 垂直排列子元素 */
		align-items: center;
		/* 水平居中对齐 */
		text-align: center;
		/* 确保文本居中 */
		margin: 5px;
		/* 子元素之间的间距 */
		font-size: 3vw;
		/* 使用视口宽度单位，使字体大小随屏幕宽度变化 */

	}

	.uppercase-a {
		font-size: 22px;
		/* 设置字母A的字体大小 */
		font-weight: bold;
		/* 设置字体加粗 */
		text-transform: uppercase;
		/* 强制大写 */

	}

	.percent-symbol {
		font-size: 22px;
		/* 设置百分号的字体大小 */
		font-weight: bold;
		/* 设置字体加粗 */

	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
		padding: 10px 0;
		align-items: center;
		/* 垂直居中对齐 */
		border-top: 1px solid #ccc;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	}

	.footer-item {

		margin: 0 1vw;
		/* 使用视口宽度单位设置图标间距 */
		display: flex;
		flex-direction: column;
		/* 让图标和文字垂直排列 */
		align-items: center;
		/* 使图标和文字水平居中对齐 */
		justify-content: center;
		/* 垂直居中 */
		text-align: center;
		/* 文字居中 */
		padding: 5px;

	}

	.footer-item u-icon {
		margin-bottom: 5px;
		/* 图标和文字之间的垂直间距 */
	}

	.feature-section {
		display: flex;
		justify-content: space-around;
		align-items: center;

	}

	.feature-icons {
		display: flex;
		/* 使用flex布局 */
		flex-direction: row;
		/* 水平排列子元素 */
		justify-content: space-around;
		/* 子元素之间的间距均匀分布 */
		align-items: center;
		/* 垂直居中对齐 */

	}

	.feature-column {
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 垂直排列第二和第三个图片 */
		align-items: center;
		/* 水平居中对齐 */
	}

	.feature-item {
		margin-bottom: 5px;
		/* 垂直间隔 */
		border: 1px solid #ccc;
		/* 边框样式 */
		border-radius: 5px;
		/* 边框圆角 */
		width: 35vw;
		/* 宽度为视口宽度的20% */
		height: 15vh;
		/* 高度为视口高度的10% */
		text-align: center;
		/* 文本居中对齐 */
		margin: 10px;
	}

	.hot-material {
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 40vw;
		/* 宽度为视口宽度的20% */
		height: 33vh;
		/* 高度为视口高度的20% */
		border: 1px solid #ccc;
		border-radius: 5px;

	}

	.data {
		width: 100%;
		/* 图片宽度占满容器 */
		height: 100%;
		/* 图片高度占满容器 */
		object-fit: cover;
		/* 确保图片覆盖整个容器，可能会裁剪图片 */
	}

	.booka {
		width: 100%;
		/* 图片宽度占满容器 */
		height: 100%;
		/* 图片高度占满容器 */
		object-fit: cover;
		/* 确保图片覆盖整个容器，可能会裁剪图片 */
	}

	.swiper-container {
		margin: 15px;
		/* 设置外边距，您可以根据需要调整这个值 */
	}

	@media (max-width: 768px) {
		.grid-item {
			font-size: 4vw;
			/* 小屏幕时使用较大的字体大小 */
		}

		.u-icon {
			font-size: 8vw;
			/* 在小屏幕上增加图标大小 */
		}

		.icon-item {
			font-size: 4vw;
			/* 小屏幕时使用较大的字体大小 */
		}

		.text-horizontal-responsive {
			font-size: 0.8rem;
			/* 小屏幕时使用较小的字体大小 */
		}

		.search-bar {

			font-size: 3vw;
			/* 使用视口宽度单位 */
			padding: 2vw;
			/* 使用视口宽度单位 */
		}

	}

	@media (min-width: 769px) {
		.grid-item {
			font-size: 2vw;
			/* 大屏幕时使用较小的字体大小 */
		}

		.u-icon {
			font-size: 2vw;
			/* 在大屏幕上减少图标大小 */
		}

		.icon-item {
			font-size: 2vw;
			/* 大屏幕时使用较小的字体大小 */
		}

		.text-horizontal-responsive {
			font-size: 1.2rem;
			/* 大屏幕时使用较大的字体大小 */
		}

		.search-bar {
			padding: 5px 35px 5px 10px;
			/* 在大屏幕上增加内边距 */
		}
	}

	/* 确保文本只横向排列 */
	.text-horizontal-responsive {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 1rem;
		/* 使用相对单位 */
	}

	/* 适用于较长文本的容器，例如标题或标签 */
	.header-content .city-wrapper .picker,
	.header-content .city-wrapper u-icon,
	.search-bar-wrapper input.search-bar {
		text-overflow: ellipsis;
		/* 如果文本太长，显示省略号 */
		white-space: nowrap;
		/* 保持文本在一行内 */
		overflow: hidden;
		/* 超出部分隐藏 */
	}
</style>